<template>
  <div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      class="one"
      :style="{width:pagesStore.sizeNum + 'px',height:pagesStore.sizeNum + 'px'}"
    >
      <path
        :fill="!theme.includes('#2e3c56')? '#224477' : '#fff'"
        d="M8.8 2.79951L8.8 3.27951C10.625 3.65026 12 5.26451 12 7.19951L12 7.66951C12 8.84701 12.4325 9.97951 13.2125 10.8595L13.3975 11.067C13.6075 11.3045 13.66 11.6395 13.53 11.927C13.4 12.2145 13.115 12.3995 12.8 12.3995L3.2 12.3995C2.885 12.3995 2.5775 12.2145 2.47025 11.927C2.34125 11.6395 2.39275 11.3045 2.6025 11.067L2.7875 10.8595C3.5675 9.97951 4 8.84701 4 7.66951L4 7.19951C4 5.26451 5.3525 3.65026 7.2 3.27951L7.2 2.79951C7.2 2.35776 7.5575 1.99951 8 1.99951C8.4425 1.99951 8.8 2.35776 8.8 2.79951ZM8 14.7995C7.575 14.7995 7.1675 14.632 6.8675 14.332C6.5675 14.032 6.4 13.602 6.4 13.1995L9.6 13.1995C9.6 13.602 9.4325 14.032 9.1325 14.332C8.8325 14.632 8.4025 14.7995 8 14.7995ZM0 6.99951C0 6.66701 0.26875 6.39951 0.6 6.39951L2.6 6.39951C2.9325 6.39951 3.2 6.66701 3.2 6.99951C3.2 7.33201 2.9325 7.59951 2.6 7.59951L0.6 7.59951C0.26875 7.59951 0 7.33201 0 6.99951ZM15.4 6.39951C15.7325 6.39951 16 6.66701 16 6.99951C16 7.33201 15.7325 7.59951 15.4 7.59951L13.4 7.59951C13.0675 7.59951 12.8 7.33201 12.8 6.99951C12.8 6.66701 13.0675 6.39951 13.4 6.39951L15.4 6.39951ZM14.9375 2.53126C15.085 2.82751 14.965 3.18801 14.6675 3.33626L13.0675 4.13626C12.7725 4.28426 12.4125 4.16426 12.2625 3.86776C12.115 3.57151 12.235 3.21101 12.5325 3.06276L14.1325 2.26276C14.4275 2.11466 14.7875 2.23481 14.9375 2.53126ZM1.33175 3.33626C1.03525 3.18801 0.91525 2.82751 1.06325 2.53126C1.2115 2.23481 1.572 2.11466 1.86825 2.26276L3.4675 3.06276C3.765 3.21101 3.885 3.57151 3.7375 3.86776C3.5875 4.16426 3.2275 4.28426 2.9325 4.13626L1.33175 3.33626Z"
        fill-rule="evenodd"
      ></path>
    </svg>
  </div>
</template>

<script setup>
import useSettingsStore from "@/store/modules/settings";
import usePagesStore from '@/store/modules/pages'
const pagesStore = usePagesStore()

const settingsStore = useSettingsStore();
const topTheme = computed(() => settingsStore.topTheme);
const theme = computed(() => settingsStore.theme);
const topNav = computed(() => settingsStore.topNav);

defineProps({
  isActive: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits();

</script>

<style scoped>
.one{
  display: inline-block;
  vertical-align: middle;
}
</style>
